
<template>
  <div class="risk-content">
    <eagle-tab-page-list
      url="/TrainPlanUser/GetPageData"
      :params="params"
      @initActive="_initActive"
      @initList="_initList"
      ref="eagleTabPageList"
    >
      <template v-if="this.active === 0">
        <div class="plan-list">
          <div
            class="plan-detail mb-10"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="exam-chnname mb-10">
              {{ item.ChnName }}<span>{{ item.OrgName }}</span
              ><span>{{ item.PostName }}</span>
            </div>
            <div class="exam-name mb-10">
              <img src="@/assets/Images/AppIcon/icon_list_kind.png" alt="" />
              {{ item.PlanName }}
            </div>
            <div class="exam-name mb-10">
              <img src="@/assets/Images/AppIcon/icon_list_type.png" alt="" />
              类型：{{ item.TrainTypeName }}
              <span class="ml-20"
                ><img
                  src="@/assets/Images/AppIcon/icon_list_level.png"
                  alt=""
                />
                层级：{{ item.TrainLevel || "无" }}</span
              >
            </div>
            <div class="exam-name mb-10">
              <img src="@/assets/Images/AppIcon/icon_list_time.png" alt="" />{{
                item.PlanStartTime
              }}<span class="ml-5 mr-5">-</span>{{ item.PlanFinishTime }}
            </div>
            <div class="exam-time" @click="changeResult(item)">
              <img
                src="@/assets/Images/AppIcon/icon_list_edit.png"
                alt=""
              />设定考核成绩
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="plan-list">
          <div
            class="plan-detail mb-10"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="exam-chnname mb-10">
              {{ item.ChnName }}<span>{{ item.OrgName }}</span
              ><span>{{ item.PostName }}</span>
            </div>
            <div class="exam-name mb-10">
              <img src="@/assets/Images/AppIcon/icon_list_kind.png" alt="" />
              {{ item.PlanName }}
            </div>
            <div class="exam-name mb-10">
              <img src="@/assets/Images/AppIcon/icon_list_type.png" alt="" />
              类型：{{ item.TrainTypeName }}
              <span class="ml-20"
                ><img
                  src="@/assets/Images/AppIcon/icon_list_level.png"
                  alt=""
                />
                层级：{{ item.TrainLevel || "无" }}</span
              >
            </div>
            <div class="exam-name mb-10">
              <img src="@/assets/Images/AppIcon/icon_list_time.png" alt="" />{{
                item.PlanStartTime
              }}<span class="ml-5 mr-5">-</span>{{ item.PlanFinishTime }}
            </div>
            <div class="exam-time" @click="changeResult(item)">
              <img
                src="@/assets/Images/AppIcon/icon_list_edit.png"
                alt=""
              />修改考核成绩
            </div>
            <van-tag
              v-if="item.PracticeResult == 'Y'"
              type="success"
              class="tags"
              >合格</van-tag
            >

            <van-tag v-else type="warning" class="tags">不合格</van-tag>
          </div>
        </div>
      </template>
    </eagle-tab-page-list>
    <eagle-overlay :show="show" @click="show = false">
      <div class="dialog-content">
        <div class="dialog-content-title">请设定考核结果</div>
        <div class="dialog-content-main">
          <div style="text-align: center" @click="setScorePost('Y')">
            <eagle-icon color="#999" name="success" />合格
          </div>
          <div style="text-align: center" @click="setScorePost('N')">
            <eagle-icon color="#999" name="success" />不合格
          </div>
        </div>
      </div>
    </eagle-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      list: [],
      params: [
        {
          title: "待我考核的培训",
          dataType: "TrainPlanUserUnCheck",
          badge: false,
        },
        {
          title: "已考核的培训",
          dataType: "TrainPlanUserChecked",
          badge: false,
        },
      ],
      CurrentProgress: 60,
      show: false,
      item: {},
    };
  },
  created() {},
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    isSameDay(timeStampA, timeStampB) {
      let dateA = new Date(timeStampA);
      let dateB = new Date(timeStampB);
      return dateA.setHours(0, 0, 0, 0) == dateB.setHours(0, 0, 0, 0);
    },

    // 修改成绩
    changeResult(item) {
      this.show = true;
      this.item = item;
    },
    // 修改成绩
    setScorePost(result) {
      this.$toast.loading({
        message: "加载中...",
      });
      const data = {
        planCode: this.item.PlanCode,
        userName: this.item.UserName,
        practiceResult: result,
      };
      this.$axios
      .post("/TrainPlan/SetScorePost",data)
      .then((res) => {
        this.$refs.eagleTabPageList.confirm();
        this.$toast.clear();
        //window.location.reload()
        // this.filter.page = 0;
        // this.filter.dataType = "TrainPlanUserChecked";
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk-content {
  background-color: #e8f1f8;
  min-height: 100vh;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.plan-detail {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  color: #333;
  font-size: 14px;
  position: relative;
  img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .tags {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.exam-chnname {
  font-size: 16px;
  > span {
    margin-left: 20px;
    font-size: 12px;
    color: #666;
  }
}
.exam-time {
  height: 28px;
  line-height: 28px;
  border-top: 1px solid #eee;
  text-align: right;
}
// 弹出层
.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 10px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
}
.dialog-content-title {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.dialog-content-main {
  display: flex;
  align-items: center;
  padding: 10px;
  > div {
    width: 50%;
  }
}

.plan-list {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>